<template>
	<view class="app">
		<view class="card column">
			<text class="tip">余额（元）</text>
			<text class="price">{{ (userInfo && userInfo.balanceValue) || 0 }}</text>
		</view>

		<view class="cell row b-b" @click="navTo(1)">
			<text class="mix-icon icon-tixian"></text>
			<text class="tit ">提现</text>
			<text class="mix-icon icon-you"></text>
		</view>
		<view class="cell row" @click="navTo(2)">
			<text class="mix-icon icon-wodezhanghu_zijinjilu"></text>
			<text class="tit ">提现记录</text>
			<text class="mix-icon icon-you"></text>
		</view>
		<view class="cell row b-b" @click="navTo(3)">
			<text class="mix-icon icon-qianbao"></text>
			<text class="tit ">我的账单</text>
			<text class="mix-icon icon-you"></text>
		</view>
	</view>
</template>
<script>
import { withdrawSetting, getUserInfo } from '@/service/mine.js';

import { mapState } from 'vuex';
export default {
	data() {
		return { setting: {} };
	},
	computed: {
		...mapState(['userInfo'])
	},
	onLoad() {
		this.getWithdrawSetting();
	},
	onShow() {
		this.getUserInfo();
	},
	methods: {
		async getUserInfo() {
			const resp = await getUserInfo();
			this.$store.commit('saveuserinfo', resp);
		},
		async getWithdrawSetting() {
			this.setting = await withdrawSetting();
			this.$store.commit('withdrawsetting', this.setting);
		},
		navTo(page) {
			let url = '';
			switch (page) {
				case 1:
					// if (this.userInfo.balanceValue < this.setting.minAmount) {
					// 	return this.$msg('余额不足');
					// }
					url = '/pages/mine/earnings/withdraw';
					break;
				case 2:
					url = '/pages/mine/earnings/withdrawLog';
					break;
				case 3:
					url = '/pages/mine/earnings/bill';
					break;
				default:
					break;
			}
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style scoped lang="scss">
/*每个页面公共css */
@import url('../../../common/css/common.css');
@import url('../../../common/css/icon.css');
.app {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 10rpx;
}
.card {
	width: 680rpx;
	height: 280rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 16rpx;
	background-image: url(~@/static/icons/wallet.png);
	background-size: 100% 100%;
	color: #fff;

	.tip {
		font-size: 28rpx;
		line-height: 40rpx;
	}
	.price {
		margin-top: 8rpx;
		font-size: 72rpx;
		line-height: 92rpx;
	}
}
.cell {
	width: 100%;
	height: 120rpx;
	padding: 0 40rpx 0 44rpx;

	&:after {
		left: 40rpx;
		right: 40rpx;
		border-color: #e8e8e8;
	}
	.tit {
		flex: 1;
		font-size: 30rpx;
		color: #333;
	}
	.mix-icon {
		width: 64rpx;
		font-size: 40rpx;
	}
	.icon-qianbao {
		color: #3ed098;
	}
	.icon-tixian {
		color: #fe7c7a;
	}
	.icon-wodezhanghu_zijinjilu {
		font-size: 42rpx;
		color: #fbbe59;
	}
	.icon-you {
		width: auto;
		font-size: 24rpx;
		color: #999;
	}
}
</style>
